$(function(){
    var bar1 = echarts.init(document.getElementById("bar1"));
    var bar2 = echarts.init(document.getElementById("bar2"));
    var bar3 = echarts.init(document.getElementById("bar3"));
    var line1 = echarts.init(document.getElementById("line1"));
    var line2 = echarts.init(document.getElementById("line2"));
    var line3 = echarts.init(document.getElementById("line3"));
    var pie1 = echarts.init(document.getElementById("pie1"));
    var pie2 = echarts.init(document.getElementById("pie2"));
    var pie3 = echarts.init(document.getElementById("pie3"));
    var pie4 = echarts.init(document.getElementById("pie4"));
    var pie5 = echarts.init(document.getElementById("pie5"));
    var pie6 = echarts.init(document.getElementById("pie6"));
    var pie7 = echarts.init(document.getElementById("pie7"));
    var pie8 = echarts.init(document.getElementById("pie8"));
    var axisLabel = {
        lineStyle: {
            show: true,
            color: '#053A62'
        },
        textStyle: {
            fontSize: 14,
            color: '#357ACC'
        }
    };
    var axisLine = {
        lineStyle: {
            color: '#053A62',
            width: 0,
        }
    };
    var splitLine = {
        lineStyle: {
            color: '#053A62'
        }
    };
    var line1Option = {
        color: ['#00ffff', '#ff9933'],
        title: {
            text: '近一月使用情况',
            textStyle: {
                color: '#00ffff',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'top'
        },
        legend: {
            x: 'center',
            y: 70,
            itemWidth: 10,
            itemHeight: 10,
            data: [{
                name: '登录',
                textStyle: {color: '#00ffff'}
            }, {
                name: '注册',
                textStyle: {color: '#ff9933'}
            }]
        },
        grid: {
            x: 20,
            y: 100,
            x2: 4,
            y2: 30,
            borderWidth: 1,
            borderColor: '#05345A',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                data: [15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,01,02,03,04,05,06,07,08,09,10,11,12,13]
            }
        ],
        yAxis: [
            {
                type: 'value',
                boundaryGap: true,
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                splitArea: {
                    show: true,
                    onGap: true,
                    areaStyle: {
                        color: ['rgba(6,29,62,.3)',
                            'rgba(6,29,62,.3)']
                    }
                },

            }
        ],
        series: [
            {
                name: '登录',
                type: 'line',
                smooth: true,
                symbolSize:0,
                data:[245,162,215,173,35,61,199,203,171,193,158,40,24,186,193,162,191,211,41,17,261,242,209,239,179,62,15,289,207,250]

            },
            {
                name: '注册',
                type: 'line',
                smooth: true,
                symbolSize:0,
                data:[9,9,8,9,0,3,12,9,10,14,5,2,0,10,14,20,12,7,2,1,24,11,5,10,5,3,1,13,9,10]

            }
        ]
    };
    var line2Option = {
        color: ['#cd21d7','#76ab4b','#0191cb','#01577d','#cd045c'],
        title: {
            text: '一周法人活跃度',
            textStyle: {
                color: '#00ffff',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 20
        },
        grid: {
            x: 65,
            y: 100,
            x2: 40,
            y2: 30,
            borderWidth: 1,
            borderColor: '#05345A',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                data: ['星期四','星期五','星期六','星期日','星期一','星期二','星期三']
            }
        ],
        yAxis: [
            {
                type: 'value',
                boundaryGap: true,
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                splitArea: {
                    show: true,
                    onGap: true,
                    areaStyle: {
                        color: ['rgba(6,29,62,.3)',
                            'rgba(6,29,62,.3)']
                    }
                },

            }
        ],
        series: [
            {
                name: '企业、农专社',
                type: 'line',
                smooth:true,
                symbolSize:0,
                data:[179,133,47,14,192,136,189]
            },
            {
                name: '社团、民非、基金会',
                type: 'line',
                smooth:true,
                symbolSize:0,
                data:[6,1,0,0,6,17,12]
            },
            {
                name: '个体',
                type: 'line',
                smooth:true,
                symbolSize:0,
                data:[6,9,1,0,27,10,17]
            },
            {
                name: '事业单位',
                type: 'line',
                smooth:true,
                symbolSize:0,
                data:[40,36,0,0,61,40,30]
            },
            {
                name: '政府机关',
                type: 'line',
                smooth:true,
                symbolSize:0,
                data:[8,0,14,1,3,4,2]
            }
        ]
    };
    var line3Option = {
        color: ['#00b0f0', '#ff0066'],
        title: {
            text: '一周用户登录情况',
            textStyle: {
                color: '#00aeef',
                fontWeight: 200,
                fontSize: 40
            },
            x: 40,
            y: 20
        },
        legend: {
            x: '76%',
            y: 50,
            itemWidth: 10,
            itemHeight: 10,
            data: [{
                name: '未实名用户',
                textStyle: {color: '#00b0f0'}
            }, {
                name: '实名用户',
                textStyle: {color: '#ff0066'}
            }]
        },
        grid: {
            x: 20,
            y: 100,
            x2: 40,
            y2: 30,
            borderWidth: 1,
            borderColor: '#05345A',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                data: ['星期四','星期五','星期六','星期日','星期一','星期二','星期三']
            }
        ],
        yAxis: [
            {
                type: 'value',
                boundaryGap: true,
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                splitArea: {
                    show: true,
                    onGap: true,
                    areaStyle: {
                        color: ['rgba(6,29,62,.3)',
                            'rgba(6,29,62,.3)']
                    }
                },

            }
        ],
        series: [
            {
                name: '未实名用户',
                type: 'line',
                smooth: true,
                symbolSize:0,
                data:[59,55,14,19,78,125,207]

            },
            {
                name: '实名用户',
                type: 'line',
                smooth: true,
                symbolSize:0,
                data:[258,219,60,38,288,656,1945]

            }
        ]
    };
    var pie1Option = {
        color: ['#00ffff', '#038a9a', '#045c72'],
        title:{
            text: '认证\n方式',
            textStyle: {
                color: '#00ffff',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name: '认证方式',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 2, name: '证书实名'},
                    {value: 54, name: '人工实名'},
                    {value: 1768, name: '工商实名'}
                ]
            }
        ]
    };
    var pie2Option = {
        color: ['#ed7d31', '#7a4933', '#4c3434'],
        title:{
            text: '用户\n等级',
            textStyle: {
                color: '#ed7d31',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name: '用户等级',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 2, name: '证书绑定用户'},
                    {value: 1823, name: '实名用户'}
                ]
            }
        ]
    };
    var pie3Option = {
        color: ['#ff24ff', '#92d050', '#00b0f0','#0070c0','#ff0066'],
        title:{
            text: '法人\n占比',
            textStyle: {
                color: '#00b0f0',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name: '法人占比',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 25, name: '社团、民非、基金会'},
                    {value: 1513, name: '企业、农专社'},
                    {value: 95, name: '个体'},
                    {value: 13, name: '政府机关'},
                    {value: 181, name: '事业单位'}
                ]
            }
        ]
    };
    var pie4Option = {
        color: ['#66ccff', '#0097fe', '#0070c0','#00b0f0'],
        title:{
            text: '认证\n方式',
            textStyle: {
                color: '#0097fe',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name: '认证方式',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 0, name: '实人'},
                    {value: 161, name: '银联实名'},
                    {value: 1236, name: '支付宝实名'},
                    {value: 8, name: '人工实名'},
					{value: 9680, name: '公安实名'}
                ]
            }
        ]
    };
    var pie5Option = {
        color: ['#ff0066', '#830a4e', '#ff0066'],
        title:{
            text: '用户\n等级',
            textStyle: {
                color: '#ff0066',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name: '用户等级',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 0, name: '实人'},
                    {value: 161, name: '银联'},
                    {value: 2439, name: '短信'},
					{value: 10816, name: '实名'}
                ]
            }
        ]
    };
    var pie6Option = {
        color: ['#00b0f0', '#052548'],
        title:{
            text: '男女\n比例',
            textStyle: {
                color: '#00b0f0',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name: '男女比例',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 7416, name: '男'},
                    {value: 3561, name: '女'}
                ]
            }
        ]
    };
    var pie7Option = {
        color: ['#00b0f0', '#052548'],
        title:{
            text: '活跃\n用户',
            textStyle: {
                color: '#00b0f0',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name: '活跃用户',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 4139, name: '活跃'},
                    {value: 45103, name: '不活跃'}
                ]
            }
        ]
    };
    var pie8Option = {
        color: ['#00b0f0', '#052548'],
        title:{
            text: '实名\n用户',
            textStyle: {
                color: '#00b0f0',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name: '实名用户',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 10977, name: '实名'},
                    {value: 2439, name: '未实名'}
                ]
            }
        ]
    };
    var bar1Option = {
        color: ['#cd21d7','#76ab4b','#0191cb','#01577d','#cd045c'],
        title: {
            text: '一年用户增长情况',
            textStyle: {
                color: '#00ffff',
                fontWeight: 200,
                fontSize: 40
            },
            x: 'center',
            y: 'top'
        },
        grid: {
            x: 65,
            y: 100,
            x2: 40,
            y2: 20,
            borderWidth: 1,
            borderColor: '#05345A',
            containLabel: true,
        },
        legend: {
            x: 'center',
            y: 70,
            itemWidth: 10,
            itemHeight: 10,
            data: [{
                name: '企业、农专社',
                textStyle: {color: '#cd21d7'}
            }, {
                name: '社团、民非、基金会',
                textStyle: {color: '#76ab4b'}
            }, {
                name: '个体',
                textStyle: {color: '#0191cb'}
            }, {
                name: '事业单位',
                textStyle: {color: '#01577d'}
            }, {
                name: '政府机关',
                textStyle: {color: '#cd045c'}
            }]
        },
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                data: ['7月','8月','9月','10月','11月','12月','1月','2月','3月','4月','5月','6月']
            }
        ],
        yAxis: [
            {
                type: 'value',
                boundaryGap: true,
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel
            }
        ],
        series: [
            {
                name: '企业、农专社',
                type: 'bar',
                barWidth:10,
                data: [0,0,0,0,0,12,220,116,100,179,696,184]
            },
            {
                name: '社团、民非、基金会',
                type: 'bar',
                barWidth:10,
                data:[0,0,0,0,0,0,8,1,2,5,4,4]
            },
            {
                name: '个体',
                type: 'bar',
                barWidth:10,
                data:[0,0,0,0,0,0,2,8,19,27,16,23]
            },
            {
                name: '事业单位',
                type: 'bar',
                barWidth:10,
                data:[0,0,0,0,0,0,2,8,19,27,16,23]
            },
            {
                name: '政府机关',
                type: 'bar',
                barWidth:10,
                data:[0,0,0,0,0,0,2,8,19,27,16,23]
            }
        ]
    };
    var bar2Option = {
        color: ['#00b0f0', '#ff0066'],
        title: {
            text: '一周用户增长情况',
            textStyle: {
                color: '#00aeef',
                fontWeight: 200,
                fontSize: 40
            },
            x: 40,
            y: 20
        },
        grid: {
            x: 25,
            y: 100,
            x2: 40,
            y2: 20,
            borderWidth: 1,
            borderColor: '#05345A',
            containLabel: true,
        },
        legend: {
            x: '76%',
            y: 70,
            itemWidth: 10,
            itemHeight: 10,
            data: [{
                name: '未实名用户',
                textStyle: {color: '#00b0f0'}
            }, {
                name: '实名用户',
                textStyle: {color: '#ff0066'}
            }]
        },
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                data: ['星期四','星期五','星期六','星期日','星期一','星期二','星期三']
            }
        ],
        yAxis: [
            {
                type: 'value',
                boundaryGap: true,
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel
            }
        ],
        series: [
            {
                name: '未实名用户',
                type: 'bar',
                barWidth:10,
                data:[19,23,7,11,24,81,235]
            },
            {
                name: '实名用户',
                type: 'bar',
                barWidth:10,
                data:[51,55,28,10,72,749,3862]
            }
        ]
    };
    var bar3Option = {
        color: ['#ff0066'],
        title: {
            text: '年龄统计',
            textStyle: {
                color: '#00aeef',
                fontWeight: 200,
                fontSize: 40
            },
            x: 40,
            y: 20
        },
        grid: {
            x: 20,
            y: 100,
            x2: 40,
            y2: 30,
            borderWidth: 1,
            borderColor: '#05345A',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                data: ['20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60']
            }
        ],
        yAxis: [
            {
                type: 'value',
                boundaryGap: true,
                axisTick: {length: 0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel
            }
        ],
        series: [
            {
                name: '人数',
                type: 'bar',
                barWidth:10,
                data: [17,24,61,113,182,263,253,330,410,407,459,412,373,309,290,317,259,276,226,283,293,287,294,315,329,341,350,326,370,351,337,239,215,207,226,255,213,101,32,34,44]
            }
        ]
    };
    bar1.setOption(bar1Option);
    bar2.setOption(bar2Option);
    bar3.setOption(bar3Option);
    line1.setOption(line1Option);
    line2.setOption(line2Option);
    line3.setOption(line3Option);
    pie1.setOption(pie1Option);
    pie2.setOption(pie2Option);
    pie3.setOption(pie3Option);
    pie4.setOption(pie4Option);
    pie5.setOption(pie5Option);
    pie6.setOption(pie6Option);
    pie7.setOption(pie7Option);
    pie8.setOption(pie8Option);
})
